import React, { memo, useState } from 'react';
import http from '@/services/request';
import { ConfigProvider, Divider, Table } from 'antd';
import { ProForm, ProToolBar } from '@/base-ui';
import DivWrapper from './style';
import zhCN from 'antd/es/locale/zh_CN';
import {
  PageSearchConfig,
  FormColumns,
  FormDataSource,
  SearchSelector,
  buttonGroup,
  DataType
} from './config';

const TransferManage = memo(() => {
  const [searchMore, setSearchMore] = useState(false);
  //复选框的内容设定
  const selectionType = 'checkbox';
  //导出
  buttonGroup[3].onClick = () => {
    http({
      method: 'get',
      url: '/server/dailySlaughter/export',
      data: JSON.stringify([1, 4]),
      responseType: 'blob',
      headers: {
        'Content-Type': 'application/json'
      }
    }).then((res: any) => {
      const blob = new Blob([res.data], {
        // res 为后台返回数据
        type: 'application/vnd.ms-excel;charset=utf-8' // 导出数据生成excel的格式设置
      });
      if ('download' in document.createElement('a')) {
        // 非IE下载
        const elink = document.createElement('a');
        elink.download = Date.now() + `.xlsx`;
        elink.style.display = 'none';
        elink.target = '_blank';
        elink.href = window.URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click();
      }
    });
  };
  const rowSelection = {
    getCheckboxProps: (record: DataType) => ({
      disabled: record.name === 'Disabled User', // Column configuration not to be checked
      name: record.name
    })
  };
  const indexTable = {
    pagination: {
      //每页10条项目
      defaultPageSize: 10,
      //自定义每页显示数目
      showSizeChanger: true,
      //当前的页数和大小
      onShowSizeChange: (current: any, pageSize: any) => {},
      //自定义每页显示项目的选项
      pageSizeOptions: ['5', '10', '15'],

      // 输入指定页码跳页
      showQuickJumper: true,
      //跳页之后的回调函数
      onShowQuickJump: (page: any) => {},
      //全部项目数（最好可以用变量表示，与实际项目数关联）
      total: FormDataSource.length,
      // 改变的回调函数
      onChange: (page: any) => {}
    }
  };
  return (
    <DivWrapper>
      {searchMore ? (
        <>
          <ProForm formItems={PageSearchConfig} />
          <Divider style={{ margin: '10px 0 20px' }} />
        </>
      ) : null}
      <ProToolBar
        searchSelector={SearchSelector}
        isMoreSearchShow={searchMore}
        onMoreSearchClick={setSearchMore}
        buttonGroup={buttonGroup}
      />
      <ConfigProvider locale={zhCN}>
        <Table
          dataSource={FormDataSource}
          columns={FormColumns}
          scroll={{ x: 1300 }}
          pagination={indexTable.pagination}
          rowSelection={{
            type: selectionType,
            ...rowSelection
          }}
        ></Table>
      </ConfigProvider>
    </DivWrapper>
  );
});

export default TransferManage;
